<template>
    <div class="goodsinfo-container">
      <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballflag" ref="ball"></div>
      </transition>
        <!-- 商品轮播图区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
				 <mt-swipe :auto="4000">
             <!-- 在组件中,使用v-for循环的话,一定要使用key -->
             <!-- 将来,谁使用此 轮播图组件,谁为我们传递 lunbotoList -->
             <!-- 此时,lunbotuList 应该是父组件向子组件传值来设置 -->
  <mt-swipe-item>
    <img src="https://img1.360buyimg.com/n6/jfs/t17149/173/1779654602/189601/335d3d90/5ad8628dN03dc292f.jpg"> 
  </mt-swipe-item>
    <mt-swipe-item><img src="https://img1.360buyimg.com/n6/jfs/t1/12051/4/12745/385200/5c9a502fE70ca5bc1/25058e6188a73179.jpg"></mt-swipe-item>
</mt-swipe>
					</div>
				</div>
			</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header"></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <p>
              市场价:<del>¥2399</del>&nbsp;&nbsp;销售价:&nbsp;&nbsp;
              <span class="now_price">¥2199</span>
            </p>
              <p><numbox @getcount="getSelectedCount"></numbox></p>
            <p class="moment">
              <mt-button type="primary" size="small">立即购买</mt-button>
               <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
            </p>
					</div>
				</div>
			</div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
				<div class="mui-card-header">荣耀V20 麒麟980 魅眼全视屏 4800万AI超清摄影 全网通6GB+128GB 标配版 幻夜黑</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:2601010087402</p>
            <p>库存情况:60件</p>
            <p>上架时间:2019-3-14</p>
					</div>
				</div>
				<div class="mui-card-footer">
          <mt-button size="large" type="primary" @click="goDesc()">small</mt-button>
          <mt-button size="large" type="danger" @click="goComment()">large</mt-button>
        </div>
			</div>
    </div>
</template>
<script>
// 导入数字选择框组件
import numbox from '../subcomponents/goodsinfo_numbox.vue';
export default {
    data(){
        return{
          ballflag:false,
          selectedCount:1,//保存用户选中的商品数量,默认,认为用户买一个
            id:this.$route.params.id,//将路由参数对象中的id挂载到 data,方便后期调用
            // lunbotuList:[]//轮播图的数据
            goodsinfo:{}//获取到的商品的信息
        }
    },
   created(){
    // this.getLunbotu()
    // this.getGoodsInfo()
   },
    methods:{
//  getLunbotu(){
//         //获取轮播图数据的方法
//         this.$http.get("api/getthumimages"+this.id).then(result=>{
//       //  console.log(result.body);
//       if(result.body.status===0){
//         //成功了
//         this.lunbotuList=result.body.message;
//       }else{
//          //失败了
//          Toast('加载轮播图失败')
//       }
//         });
//     }

getGoodsInfo(){
this.$http.get("api/goods/getinfo/"+this.id).then(result=>{
   if(result.body.status===0){
   this.goodsinfo=result.body.message[0];
   }
 })
 },
 goDesc(){
this.$router.push('/home/goodsdesc');
// this.$router.history.go(-1)后退
},
goComment(){
  this.$router.push('/home/goodscomment');
},
addToShopCar(){
      this.ballflag=!this.ballflag;
      // 拼接出一个,要保存到store中car 数组里的商品信息对象
      var goodsinfo ={
        id:this.id,
        count:this.selectedCount,
        price:this.goodsinfo.sell_price,
        selected:true
        }
        // 调用 store中的 mutations 来将商品加入购物车
        this.$store.commit("addToCar",goodsinfo);
},
beforeEnter(el){
el.style.transform="translate(0,0)";
},
enter(el,done){
// 获取小球在页面中的位置
const ballPosition=this.$refs.ball.getBoundingClientRect();
// 获取徽标在页面中的位置
const badgePosition=document
 .getElementById("badge")
 .getBoundingClientRect();
 const xDist=badgePosition.left-ballPosition.left;
 const yDist=badgePosition.top-ballPosition.top;
  el.offsetWidth;
el.style.transform=`translate(${xDist}px, ${yDist}px)`;
el.style.transition='all 3s cubic-bezier(.97,-0.01,.05,.98)';
done()
},
afterEnter(el){
this.ballflag=!this.ballflag;
},
getSelectedCount(count){
  // 当子组件吧选中的数量传递给父组件的时候,把选中的值保存到 data 上 
  this.selectedCount=count;
  console.log("父组件拿到的数量值为:"+this.selectedCount);
}
    },   
components:{
  numbox
}
}
</script>
<style lang="scss">
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;
    
    .mint-swipe{
      text-align: center;
      height:200px;
//   .mint-swipe-item{
//    &:nth-child(1){
//      background-color: red; 
//    }
 
//     &:nth-child(2){
//      background-color: blue;
//    }
//     &:nth-child(3){
//      background-color: yellow;
//    }
   img{
    // width: 100%;
    height: 100%;
    
   }
  }
// }
.mui-card-footer{
  display: block;
  .mint-button{
  margin:10px 0;
  }
}
.ball{
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  position: absolute;
  z-index: 99;
  top: 48%;
  left:21%;
}
}
.mint-button{
  line-height: 33px;
}
.now_price{
  color:red;
  font-size: 16px;
  font-weight: bold;
}
</style>

